<template>
  <!--顶部菜单-->
  <div class="top_menu">
    <div :class="$parent.menuState?'titles':'title'">
      <span class="title-logo" v-if="!$parent.menuState">
        <img class="logo" src="../../assets/images/logon.png" alt="">
        <img src="../../assets/images/20240722092506.png" alt="">
      </span>
      <span v-else>护苗</span>
    </div>
    <ul>
<!--      <li class="li_left">-->
<!--        <i :class="$parent.menuState?'el-icon-s-unfold':'el-icon-s-fold'" @click="$parent.menuState=!$parent.menuState"></i>-->
<!--      </li>-->
      <li>
        <div class="top-menu-tree">
          <topMenu @menuClick="menuClick" :data="menuTree"></topMenu>
        </div>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ userInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="updatePass">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
    <updatePassword ref="updatePassword"></updatePassword>
  </div>
</template>

<script>
import * as c from '@/util/config'
import * as u from '@/util/util'

export default {
  name: "index",
  props: {
    menuTree:Array
  },
  components: {
    'updatePassword': () => import('@/components/user/updatePassword.vue'),
    'topMenu': () => import("../../components/menu/top_menu.vue")
  },
  data() {
    return {
      //用户信息
      userInfo: u.getSession(c.sessionKey.USER_INFO),
    }
  },
  methods: {
    menuClick(data){
      this.$emit('menuClick',data)
    },
    //下拉菜单触发时间
    handleCommand(command) {
      switch (command) {
        case 'updatePass':
          this.$refs.updatePassword.openDia();
          break
        case 'userInfo':
          break
        case 'logout':
          this.$confirm('是否确认退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$HttpService.get("/logout").then(res => {
              this.$util.clearSession();
              //清空顶部导航
              this.$store.dispatch("closeAll")
              this.$router.push('/login')
            })
          })
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">
.top_menu {
  width: 100%;
  height: 50px;
  display: flex;


  .top-menu-tree{
    text-align: right;
    width: 50%;
    display: inline-block;
    height: 50px;
    vertical-align: top;
  }

  .title {
    width: 200px;
    text-align: center;
    font-size: 20px;
    color: white;
    line-height: 50px;
    cursor: pointer;
    .title-logo{
      display: flex;
    }
    .logo{
      width: 40px;
      height: 40px;
      position: relative;
      top:5px;
      left: 25px;
    }
    img{
      position: relative;
      top:5px;
    }
  }

  .titles {
    width: 65px;
    text-align: center;
    font-size: 20px;
    color: white;
    line-height: 50px;
    cursor: pointer;
  }

  ul {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    list-style-type: none;
    text-align: right;
  }

  .li_left {
    float: left;
    margin-left: 0px;
    font-size: 20px;
  }

  .el-icon-s-fold:hover, .el-icon-s-unfold:hover {
    color: #169bd5;
  }

  li {
    line-height: 50px;
    margin-left: 20px;
  }
}
</style>
